import React, { Component } from 'react';
import { View } from 'react-native';

/**
 * 线性布局
 */
export default class FlexDirectionBasics extends Component {
    render() {
        return (
            // flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。
            <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'red'}}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}/>
            </View>
        );
    }
}